<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='https://cdn.staticfile.org/react/16.4.0/umd/react.development.js'></script>
    <script src='https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js'></script>
    <!-- 生产环境中不建议使用 -->
    <script src='https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js'></script>
    <!-- PropTypes文件 -->
    <script src="https://unpkg.com/prop-types@15.6.2/prop-types.js"></script>
</head>

<body>
    <div id='app'>
    </div>
    <script type='text/babel'>
        // 函数式组件其实也是可以使用props的，但是三大核心属性中函数式组件也就只能使用props了，也就是说state和refs函数式组件是不能用的。因为函数可以接收参数，所以函数式组件可以利用这个特点去使用props，使用方法如下，比较简单，就不写出来了。
        function Person(props){
            const {name,age,sex} = props
            return (
                    <ul>
                        <li>姓名: {name}</li>
                        <li>性别: {sex}</li>
                        <li>年龄: {age+1}</li>
                    </ul>
                )
        }

        // 对于类型和默认值的限制和类式组件类似，不做讲解
        Person.propTypes = {
                name:PropTypes.string.isRequired,
                age:PropTypes.number,
                sex:PropTypes.string,
                speak:PropTypes.func
        }

        Person.defaultProps = {
            sex:'保密',
            age:100
        }

        const p1 = {name:'刘康',sex:'女',age:23}
        let app = document.getElementById('app')
        ReactDOM.render(<Person {...p1}/>,app)
    </script>
</body>

</html>